<script setup lang="ts">

import DetailHeaderCom from '@/components/detail/DetailHeaderCom.vue';
import DetailMainCom from '@/components/detail/DetailMainCom.vue';

</script>


<template>
    <div class="content-detail">
        <DetailHeaderCom />
        <DetailMainCom />
        <footer class="footer-detail">
            <van-search left-icon="edit" placeholder="写评论..." />
            <span><van-icon size="20" name="good-job-o" />
                <p>20</p>
            </span>
            <span>
                <van-icon size="20" name="chat-o" />
                <p>5</p>
            </span>

            <span>
                <van-icon size="20" name="share-o" />
                <p>分享</p>
            </span>

            <span>
                <van-icon size="20" name="like-o" />
                <p>收藏</p>
            </span>
        </footer>
    </div>
</template>

<style scoped lang="scss">
.content-detail {
    height: 100%;
    display: flex;
    flex-direction: column;

    .footer-detail {
        width: 100%;
        height: 0.77rem;
        display: flex;
        justify-content: space-around;
        align-items: center;

        span {
            color: #333;
            text-align: center;
            position: relative;
            top: 6px;

            .van-icon {
                position: relative;
                top: 6px;
            }
        }

        .van-search {
            width: 135px;
            height: 40px;
            border-radius: 35px;
            background-color: #f5f5f5;
            --van-search-content-background: #f5f5f5;
        }
    }
}
</style>